import { createApp, defineComponent, ref, h } from "vue";
import ContextMenu from "./index.vue";

// 存储当前激活的菜单实例
let activeMenu = null;

// 方法实现部分
const showContextMenu = (event, menuItems, data) => {
  // 关闭已存在的菜单（立即关闭）
  if (activeMenu) {
    activeMenu.close(true); // 立即关闭
    activeMenu = null;
  }

  // 创建容器
  const container = document.createElement("div");
  document.body.appendChild(container);
  // 创建响应式变量
  const visible = ref(true);
  const position = ref({
    x: event.clientX,
    y: event.clientY,
  });

  // 添加边界检查，防止菜单超出屏幕
  const adjustPosition = () => {
    setTimeout(() => {
      const menuElement = container.querySelector(".context-menu");
      if (!menuElement) return;

      const rect = menuElement.getBoundingClientRect();
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;

      if (rect.right > windowWidth) {
        position.value.x = windowWidth - rect.width - 5;
      }

      if (rect.bottom > windowHeight) {
        position.value.y = windowHeight - rect.height - 5;
      }
    }, 10);
  };

  // 关闭菜单函数
  let contextMenuApp = null; // 存储应用实例
  // eslint-disable-next-line
  const closeContextMenu = (immediate = false) => {
    if (visible.value) {
      visible.value = false;
    }
    if (contextMenuApp && contextMenuApp._container) {
      contextMenuApp.unmount();
      contextMenuApp = null;
    }
    container.remove();
    activeMenu = null;
  };
  // 创建渲染函数
  const render = () => {
    return h(ContextMenu, {
      menuItems: menuItems,
      visible: visible.value,
      position: position.value,
      data: data,
      onClose: () => closeContextMenu(false),
    });
  };

  // 定义组件
  const comp = defineComponent({
    render,
    setup() {
      return { visible, position };
    },
  });

  // 创建并挂载应用
  contextMenuApp = createApp(comp);
  contextMenuApp.mount(container);

  // 调整菜单位置（防止超出屏幕）
  adjustPosition();

  // 保存当前菜单引用
  activeMenu = { close: closeContextMenu };

  // 添加全局点击监听（点击菜单外区域关闭）
  const handleDocumentClick = (e) => {
    // 检查点击是否在菜单内部
    const isInside = container.contains(e.target);
    if (!isInside) {
      closeContextMenu();
    }
  };

  document.addEventListener("click", handleDocumentClick);

  return {
    close: (immediate) => closeContextMenu(immediate),
    // 清理函数，在菜单关闭时移除事件监听
    cleanup: () => document.removeEventListener("click", handleDocumentClick),
  };
};

// 插件安装对象
const ContextMenuPlugin = {
  install: (app) => {
    // 使用 provide 注入（适用于组合式API）
    app.provide("showContextMenu", showContextMenu);

    // 添加到全局属性（调试用）
    app.config.globalProperties.$showContextMenu = showContextMenu;

    // 添加到 window 对象（调试用）
    if (typeof window !== "undefined") {
      window.$showContextMenu = showContextMenu;
    }
  },
};

// 导出单个方法
export { showContextMenu };

// 默认导出插件
export default ContextMenuPlugin;
